<template>
  <view class="tab-bar">
    <view v-for="(item,index) in tabBarList" :key="index" class="tab-bar-item" :class="{'code': selected === item.id }" @click="switchTab(item, index)">
      <view :style="{'color': selected == index ? selectedColor : color}">
        <image class="tab_img" :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
      </view>
	<view class="tab_text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  // 子组件传递参数
  const props = defineProps({
    selected: {
      type: Number,
      default: 0
    }
  })

  // 默认颜色
  let color = ref('#000')
  // 选中的颜色
  let selectedColor = ref('#ffb2b2')
  // 菜单栏集合 - 与 pages.json -> tabbar 配置一样
  let tabBarList = ref([{
      "id": 0,
      "pagePath": "/pages/index/index",
	  "iconPath": "/static/ai.png",
	  "selectedIconPath": "/static/ai_active.png",
      "text": "AI写真"
    },
    {
      "id": 1,
      "pagePath": "/pages/filter/filter?age=0&category=0",
      "iconPath": "/static/photo.png",
      "selectedIconPath": "/static/photo_active.png",
      "text": "写真集"
    },
    {
      "id": 2,
      "pagePath": "/pages/my/my",
      "iconPath": "/static/my.png",
      "selectedIconPath": "/static/my_active.png",
      "text": "我的"
    }
  ])
  // 隐藏原生TabBar
  // uni.hideTabBar();
  // 跳转tabBar菜单栏
  const switchTab = (item) => {
	let url = item.pagePath;
	const currentUrl = getCurrentPages()[0].route
	if (currentUrl !== url) {
		uni.redirectTo({
		  url
		})
	}
	
  }
</script>
s'c
<style lang="scss" scoped>
  // 外部装修
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0rpx;
    right: 0rpx;
    height: 144rpx;
    background: white;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(165, 168, 171, 0.83) !important;
	padding-bottom: env(safe-area-inset-bottom);

    // 给每个 item 设置样式
    .tab-bar-item {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 150rpx;
      padding: 10rpx;
      background-color: transparent;
      transition: all 0.5s ease-in-out;
      margin: auto;

      // 限制每个icon的大小
      .tab_img {
        width: 72rpx;
        height: 72rpx;
		display: block;
      }

      // 限制文字大小
      .tab_text {
        margin-top: 9rpx;
        flex: 1;
		font-family: PingFang SC;
		font-weight: 400;
		font-style: Regular;
		font-size: 22rpx;
		leading-trim: NONE;
		line-height: 30rpx;
		letter-spacing: 0px;
		text-align: center;

      }
    }

    //中间凸起扫码
    .code {
      position: relative;
      top: -36rpx;
      width: 178rpx;
      height: 178rpx;
      border-radius: 89rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
	  background-color: #ffffff;
	  border: 12rpx solid #ffffff;
	  box-sizing: border-box;

      // 限制每个icon的大小
      .tab_img {
        width: 72rpx;
        height: 72rpx;
      }
    }
  }
</style>
